<template>
  <div>
    <!--密码登录 -->
    <div class="yanzhengma">
      <div class="cha" @click="goback">×</div>
      <div class=" yan-zi-1">密码登录</div>
      <div class="kong"></div>
      <div class="shurumi">
        <van-form id="form1">
          <van-field v-model="account" name="手机号/邮箱" label="手机号/邮箱" placeholder="手机号/邮箱"
                     :rules="[{ required: true, message: '手机号/邮箱' }]" />
          <van-field v-model="password" name="密码" label="密码" type="password" placeholder="密码">
            <template #button>
              <van-button size="small"  style=" border: none;color: #51b8ff" @click="forget" >忘记密码?</van-button>
            </template>
          </van-field>
          <div style="margin: 20px; margin-top: 50px;">
            <van-button round block type="info" native-type="submit" @click="login">登录</van-button>
          </div>
        </van-form>
      </div>

      <div class="mima">
        <div class="mi" @click="toLogin">免密码登录</div>
      </div>

      <div class="xia">
        <van-checkbox v-model="radio" shape="square">我已阅读并同意《服务协议》和《隐私政策》</van-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "PasswordLogin",
  data() {
    return {
      //密码验证码显示
      isSmsSend: false,
      sendBtnText: '获取验证码',
      isShowVcPd: false,
      radio: true,
      account: '',
      code: '',
      password: '',
      counter: 60,
      loginVo: {
        account: '',
        code: '',
        password: '',
        areaCode: '+86',
      }
    }
  },
  methods: {
    forget() {
      this.$router.push({
        path: '/resetPassword',
        query: {
          account: this.account,
          areaCode: '+86'
        }
      });
    },





    yzm() {
      axios.get('http://localhost:11219/express/express/vc/' + this.account).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$toast.success('验证码发送成功');
        } else {
          this.$toast.fail('验证码发送失败');
        }
      })
    },

    login() {
      if (this.radio) {
        this.loginVo.account = this.account;
        this.loginVo.code = this.code;
        this.loginVo.password = this.password;
        axios.post('http://localhost:11219/express/express/loginAPd', this.loginVo).then(res => {
          localStorage.setItem('login', JSON.stringify(res.data.data));
          console.log(res)
          if (res.data.code == 200) {
            this.$toast.success('登录成功');
            this.$router.push({
              path: '/home/Home',
            });
          } else {
            this.$toast.fail(res.data.message);
          }
        })
      } else {
        this.$toast.fail('请先同意协议');
        return
      }
    },

    // 密码验证码登录显示
    isShowVcPdUpdate() {
      this.account = ''
      this.code = ''
      this.password = ''
      this.isShowVcPd = !this.isShowVcPd
    },
    goback() {
      this.$router.go(-1);
    },
    toLogin(){
      this.$router.push({
        path: '/login/Login',
      });
    }
  },

  created() {
  }
}
</script>

<style scoped>
.yanzhengma {
  width: 100%;
  height: 100%;
  top: 0;
  /* 固定定位 */
  position: fixed;
  margin-top: 0;
  margin-bottom: 0;
  /* 当内容超出容器高度时，垂直方向显示滚动条 */
  overflow-x: hidden;
  /*border: 1px solid red; */
}
#form1{
  margin-right: 30px;
}
.cha {
  width: 50px;
  height: 50px;
  float: left;
  /*border: 1px solid red; */
  font-size: 50px;
  color: dimgrey;
}

.yan-zi-1 {
  position: fixed;
  margin-top: 100px;
  margin-left: 40px;
  font-size: 35px;
}

.yan-zi-2 {
  float: left;
  margin-top: 155px;
  margin-left: -10px;
  font-size: 15px;
}

.kong {
  float: left;
  width: 100%;
  height: 40px;
}

.shuru {
  width: 360px;
  height: 120px;
  float: left;
  margin-left: 30px;
  margin-top: 80px;
}

.shurumi {
  width: 360px;
  height: 120px;
  float: left;
  margin-left: 30px;
  margin-top: 180px;
}

.denglu {
  width: 360px;
  height: 50px;
  float: left;
  margin-left: 30px;
  margin-top: 20px;
  background-color: #4A9CD6;
  /*设置边框圆角 */
  border-radius: 30px;
  color: white;
  /* border: 1px solid red; */
}

.deng {
  float: left;
  margin-left: 165px;
  margin-top: 15px;
}

.mima {
  width: 360px;
  height: 50px;
  float: left;
  margin-left: 30px;
  margin-top: 80px;
  /*设置边框圆角 */
  border-radius: 30px;
}

.mi {
  float: left;
  margin-left: 150px;
  margin-top: 15px;
}

.xia {
  width: 360px;
  height: 30px;
  float: left;
  margin-left: 30px;
  margin-top: 280px;
  /*border: 1px solid red; */
}
</style>
